A webpage displays text, images, and other elements based on markup code such as hyper-text markup language (HTML) code. To render a webpage, most web browsers download the webpage's markup code document (e.g., the HTML code) and any associated web resources (e.g., JavaScript, CSS, images, etc.) into local memory. The web browser parses the markup code document to create an internal model that is similar to the document object model (DOM) tree structure. This internal model (i.e., the “live DOM”) represents a hierarchical tree of nodes that identify displayed elements and attributes. The web browser displays the elements by applying layout rules that are highly dependent upon the order of the live DOM hierarchy. The laying out of elements being limited by the order of the live DOM hierarchy significantly limits the creation of webpages that use alternative/variable layouts, such as responsive webpages that respond to browser screen size (e.g., current webpage width).
Existing webpage design tools allow designers to design responsive webpages. For example, FIG. 1A illustrates a portion of a design interface 1 that allows a designer to position elements on a design canvas 2. In this example, the designer has positioned a red box 3, a green box 4, and a blue box 5. Based on these positions, the design tool generates webpage code that specifies the display of the boxes 3, 4, 5 in a created webpage. The design interface 1 allows the designer to preview the responsive design of the webpage by changing the width of the canvas area 2 from width 6 to another width. As shown in FIG. 1B, when width 6 (FIG. 1A) is reduced to width 7, the webpage responds by reducing the respective widths and changing the positions of the red box 3, the green box 4, and the blue box 5.
Existing webpage design tools are limited with respect to allowing designers to create and customize responsive designs. Specifically, a designer is able to customize some aspects of the elements for particular screen sizes, but cannot make any alterations that would require different screen sizes using different element orders or hierarchy organizations. This limitation is illustrated in FIGS. 2A-C. In FIG. 2A a designer has created a layout by positioning boxes 3, 4, 5 on the canvas 2. The design tool generates HTML code 8 specifying these elements. The designer intends to use the original layout of FIG. 2A as a desktop layout and the variation shown in FIG. 2B as a mobile layout for smaller webpage widths (e.g., widths of 454 and fewer pixels). After creating the FIG. 2A layout, the designer initiates a new layout and, for the mobile layout, repositions the boxes 3, 4, 5 vertically stacked: blue box 5 then red box 3 then green box 4 from top to bottom, as shown in FIG. 2B. However, because this changes the order of the boxes 3, 4, 5, it requires altered HTML code 9 and will result in corresponding altered live DOM structure changes. The designer intended to change only the appearance of the mobile layout, but the change to the HTML and corresponding live DOM structure has unintended consequences on the other layouts. Specifically, as shown in FIG. 2C, after changing the mobile layout, when the designer tests the desktop layout, its appearance is based on the modified HTML 9 and the appearance of the boxes 3, 4, 5 differs substantially from the intended appearance of FIG. 2A. Similarly, a designer cannot make any alterations that would require different screen sizes using different hierarchy organizations. For example, in some cases, elements are located under different parents across multiple breakpoints, such as being contained inside another user interface element, for one breakpoint, and directly on the page for another breakpoint.
Existing webpage design tools are limited to creating multiple designs for a webpage that all use a single order of elements in the HTML's DOM. Since webpage layout rules prevent the same element from appearing under different parent nodes for different designs, existing tools avoided using alternative orders of elements that would have thus required duplicating nodes for the common elements and other portions of the designs. Such duplication would have, for example, increased the webpage size, transmission time, and storage requirements, introduced complexity and the risk of inconsistency in the webpage, and had a negative impact on search engine use of the webpage. Thus, when creating a webpage with multiple layouts for different webpage widths using existing webpage design tools, a designer is not able to design independent alternative layouts that would reorder the elements. Moreover, there is no way to address this issue by modifying the live DOM hierarchy using cascading style sheets (CSS) media queries. Thus, even armed with a sophisticated knowledge of CSS and HTML, webpage designers are unable create a single webpage with alternative layouts with different element orders for the different webpage widths of differing devices. This means that designers must sacrifice design freedom for the sake of multi-device support or sacrifice multi-device support to have design freedom.